import { ComponentType, ReactElement } from "react";
import { Text as TText } from "@tarojs/components";
import { TextProps } from "@tarojs/components/types/Text";
import { useThemeState } from "../theme";

type Props = ComponentType<
  TextProps & {
    children: any;
    bold?: boolean;
    style?: any;
    letterSpacing?: string;
  }
>;

const Text: Props = ({
  children,
  style,
  bold,
  letterSpacing,
  ...props
}): ReactElement => {
  const { theme } = useThemeState();
  return (
    <TText
      style={{
        color: theme.color,
        fontWeight: bold ? "bold" : undefined,
        letterSpacing,
        ...style,
      }}
      {...props}
    >
      {children}
    </TText>
  );
};

export default Text;
